import { Layout } from 'antd';
import { Content, Footer } from 'antd/es/layout/layout';
import { useMemo, useState } from 'react';
import { useSettingActions, useSettings } from '@/store/settingStore';
import { ThemeLayout, ThemeMode } from '@/types/enum';
import NavLogo from './NavLogo';
import Account from '@/layouts/_common/account';
import { agentSquareType, historicalDialogueType, MenuContentType } from '@/common';
import { t } from '@/locales/i18n';
import { SvgIcon } from '@/components/icon';
import AvatarDisplay from '@/components/work-modal/components/AvatarDisplay';
import useWindowWidth from '@/hooks/event/use-window-width';
interface NavProps {
  changeContentType: (contentType: MenuContentType) => void;
  deleteCollectAgent: (event: any, appId: string) => void;
  deleteHistoryDialogue: (event: any, data: historicalDialogueType) => void;
  onGetCollect: (item: agentSquareType) => void;
  onGetHistoryDialogue: (item: historicalDialogueType) => void;
  onClose?: () => void;
  agentSquare: agentSquareType[];
  historicalDialogue: historicalDialogueType[];
  contentType: MenuContentType;
  isShowDrawer?: boolean;
}
import { Divider, Menu, Switch } from 'antd';
import type { GetProp, MenuProps } from 'antd';

type MenuTheme = GetProp<MenuProps, 'theme'>;

type MenuItem = GetProp<MenuProps, 'items'>[number];
const items: MenuItem[] = [
  {
    key: '1',
    icon: <SvgIcon icon="fusion-chat" size="20" className="mr-1" />,
    label: '首页',
  },
  {
    key: '2',
    icon: <SvgIcon icon="fusion-agent" size="20" className="mr-1" />,
    label: '应用广场',
  },
  {
    key: '3',
    label: '全部历史会话',
    icon: <SvgIcon icon="fusion-agent" size="20" className="mr-1" />,
  },
];
const { Sider } = Layout;
export default function Nav({
  changeContentType,
  deleteCollectAgent,
  deleteHistoryDialogue,
  onGetHistoryDialogue,
  onGetCollect,
  onClose,
  agentSquare,
  historicalDialogue,
  contentType,
  isShowDrawer = false,
}: NavProps) {
  const { isPc } = useWindowWidth();
  const { setSettings } = useSettingActions();
  const settings = useSettings();
  const [selectIndex, setSelectIndex] = useState<number>(-1);
  const [historyIndex, setHistoryIndex] = useState<number>(-1);

  const { themeLayout, themeMode, darkSidebar } = settings;
  const collapsed = useMemo(() => themeLayout === ThemeLayout.Mini, [themeLayout]);
  const handleToggleCollapsed = () => {
    setSettings({
      ...settings,
      themeLayout: collapsed ? ThemeLayout.Vertical : ThemeLayout.Mini,
    });
  };
  const sidebarTheme = useMemo(() => {
    if (themeMode === ThemeMode.Dark) {
      return darkSidebar ? 'light' : 'dark';
    }
    return darkSidebar ? 'dark' : 'light';
  }, [themeMode, darkSidebar]);

  function mouseEvent(e: number) {
    setSelectIndex(e);
  }

  function mouseLeave() {
    setSelectIndex(-1);
  }

  const onClick: MenuProps['onClick'] = ({ key, domEvent, keyPath }) => {
    console.log(keyPath, domEvent, key);
    if (key === '1') {
      changeContentType('homepage');
    } else if (key === '2') {
      changeContentType('public-agent');
    } else if (key === '3') {
      changeContentType('history');
    }
  };

  return (
    <div>
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        width={260}
        theme={sidebarTheme}
        className="!fixed left-0 top-0 z-10 h-screen"
        style={{ background: '#fff', boxShadow: '4px 0px 20px 0px rgba(0, 0, 0, 0.05)' }}
      >
        <Layout className="jr-step-v2-1 flex h-full flex-col" style={{ background: '#fff' }}>
          {isShowDrawer ? (
            <div className="flex items-center justify-around">
              <NavLogo collapsed={collapsed} onToggle={handleToggleCollapsed} />
              <SvgIcon icon="fusion-mobile4" size={30} onClick={onClose} />
            </div>
          ) : (
            <NavLogo collapsed={collapsed} onToggle={handleToggleCollapsed} />
          )}
          <Layout className="flex-1 bg-white">
            {/* 添加 flex-1 使内容区域占据剩余空间 */}
            <Content className="bg-white">
              {!collapsed ? (
                <>
                  <div
                    onClick={() => changeContentType('homepage')}
                    className="relative z-10 m-2 flex cursor-pointer items-center justify-center overflow-hidden rounded-md p-2"
                    style={{
                      background: 'linear-gradient(263.5deg, #14DCFF -21.04%, #387EFF 100%)',
                      WebkitBackgroundClip: 'text',
                      backgroundClip: 'text',
                      color: 'transparent',
                      border:
                        contentType === 'homepage' ? '2px solid transparent' : '1px solid #D6DBE3',
                    }}
                  >
                    {/* 内容 */}
                    <SvgIcon icon="fusion-chat" size="20" className="mr-1" />
                    {t('sys.menu.fusion.create')}

                    {/* 渐变边框层 */}
                    {contentType === 'homepage' && (
                      <div
                        className="absolute inset-0 -z-10 rounded-md"
                        style={{
                          background:
                            'radial-gradient(50% 287.5% at 50% 50%, #14DCFF 0%, #387EFF 100%)',
                          padding: '1px', // 边框宽度
                          mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
                          maskComposite: 'exclude',
                          WebkitMask:
                            'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
                          WebkitMaskComposite: 'xor',
                        }}
                      />
                    )}
                  </div>
                  <div
                    onClick={() => {
                      changeContentType('public-agent');
                    }}
                    className={`${
                      contentType === 'public-agent'
                        ? 'rounded-md bg-[#F3F5F9]  font-semibold text-[#1B6DFA]'
                        : 'border-b border-[#D6DBE3]'
                    } m-2 mt-4 flex cursor-pointer items-center justify-between    p-2`}
                  >
                    <div className="flex items-center">
                      <SvgIcon icon="fusion-agent" size="20" className="mr-1" />
                      {t('sys.menu.fusion.agent')}
                    </div>
                    {/* <div>{agentSquare.length}</div> */}
                  </div>
                  <div className="mt-2 pl-10">
                    {agentSquare.map((item: agentSquareType, i: number) => {
                      return (
                        <div
                          key={i}
                          className={`
                        flex h-[40px] w-[206px] cursor-pointer items-center rounded-lg px-4 ${
                          selectIndex === i ? 'bg-[#F3F5F9] font-semibold' : ''
                        } 
                        `}
                          onMouseEnter={() => mouseEvent(i)}
                          onMouseLeave={() => mouseLeave()}
                          onClick={() => onGetCollect(item)}
                        >
                          <div className="mr-2">
                            {/* <SvgIcon icon={item.icon} size="20" className="mr-1" /> */}
                            <AvatarDisplay
                              src={item.avatar}
                              size={30}
                              className="h-[30px] w-[30px]"
                            />
                          </div>
                          <div className="w-[150px] truncate text-sm text-[#4E5969]">
                            {item.appName}
                          </div>
                          {(selectIndex === i || !isPc) && (
                            <div
                              className="flex items-center"
                              onClick={(e) => deleteCollectAgent(e, item.appId)}
                            >
                              <SvgIcon icon="fusion-sc1" size={20} />
                              {/* <SvgIcon icon={item.collectIcon} size="20" className="mr-1" /> */}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                  <div
                    onClick={() => {
                      changeContentType('history');
                    }}
                    className={`${
                      contentType === 'history'
                        ? 'rounded-md bg-[#F3F5F9] font-semibold text-[#1B6DFA]'
                        : 'border-b border-[#D6DBE3]'
                    } m-2 mt-4 flex cursor-pointer items-center justify-between  p-2`}
                  >
                    <div className="flex items-center">
                      <SvgIcon icon="fusion-agent" size="20" className="mr-1" />
                      {t('sys.menu.fusion.history')}
                    </div>
                    {/* <div>{historicalDialogue.length}</div> */}
                  </div>
                  <div className="scrollbar-hide mt-2 h-[400px] overflow-auto pl-10">
                    {historicalDialogue.map((item: historicalDialogueType, i: number) => {
                      return (
                        <div
                          key={i}
                          className={`
                          flex h-[40px] w-[206px] cursor-pointer items-center rounded-lg px-4 font-semibold hover:bg-[#F3F5F9] hover:!text-[#1B6DFA]
                          `}
                          onMouseEnter={() => {
                            setHistoryIndex(i);
                          }}
                          onMouseLeave={() => {
                            setHistoryIndex(-1);
                          }}
                          onClick={() => onGetHistoryDialogue(item)}
                        >
                          <div className="w-[170px] truncate text-sm ">{item.title}</div>
                          {(historyIndex === i || !isPc) && (
                            <div
                              className="flex items-center"
                              onClick={(e) => deleteHistoryDialogue(e, item)}
                            >
                              <SvgIcon icon="fusion-delete" size={20} />
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                  {historicalDialogue.length == 10 && (
                    <div
                      className="mt-2 cursor-pointer  pl-14"
                      onClick={() => changeContentType('history')}
                    >
                      查看全部
                    </div>
                  )}
                </>
              ) : (
                <>
                  <Menu mode="inline" items={items} onClick={onClick} />

                  {/* <div
                    onClick={() => {
                      changeContentType('homepage');
                    }}
                    className="relative z-10 m-2 flex cursor-pointer items-center justify-center rounded-md border border-[#D6DBE3] p-2 
                "
                  >
                    <SvgIcon icon="fusion-chat" size="20" className="mr-1" />
                  </div>
                  <div
                    onClick={() => {
                      changeContentType('public-agent');
                    }}
                    className={`${
                      contentType === 'public-agent'
                        ? 'rounded-md bg-[#F3F5F9]  font-semibold text-[#1B6DFA]'
                        : 'border-b border-[#D6DBE3]'
                    } m-2 mt-4 flex cursor-pointer items-center justify-center   p-2`}
                  >
                    <SvgIcon icon="fusion-agent" size="20" className="mr-1" />
                  </div>
                  <div
                    onClick={() => {
                      changeContentType('history');
                    }}
                    className={`${
                      contentType === 'history'
                        ? 'rounded-md bg-[#F3F5F9] font-semibold text-[#1B6DFA]'
                        : 'border-b border-[#D6DBE3]'
                    } m-2 mt-4 flex cursor-pointer items-center justify-center  p-2`}
                  >
                    <SvgIcon icon="fusion-agent" size="20" className="mr-1" />
                  </div> */}
                </>
              )}
            </Content>
          </Layout>
          <Footer style={{ padding: '0px', background: '#fff' }}>
            <Account isShow={true} />
          </Footer>
        </Layout>
      </Sider>
    </div>
  );
}
